<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta charset="utf-8"/>
    <title>米塔云平台管理系统</title>
    <link href="../plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../plugins/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet">
    <link href="../plugins/font-awesome/css/all.min.css" rel="stylesheet">
    <link href="../customize/css/iconfont.css" rel="stylesheet">
    <link href="../customize/css/content.css" rel="stylesheet">
    <style>
        #wait_List .notify {
            color: hsl(30, 80%, 55%);
        }

        #wait_List .warn {
            color: hsl(0, 80%, 55%);
        }

        .modal textarea.form-control {
            height: 100px;
        }

        .table .text-truncate {
            width: 5em;
            margin: 0 auto
        }
        #maintenance_List td,#maintenance_List th{ white-space: nowrap;}
    </style>
</head>
<body>
<div class="m-3">
    <nav class="mb-3 custom-section">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><i class="iconfont icon-xiaolan6"></i> 设备管理</li>
            <li class="breadcrumb-item active"><i class="iconfont icon-xiaolan22"></i> 生产设备维保管理</li>
        </ol>
    </nav>
    <div class="d-flex">
        <div class="custom-section" style="width: 350px;">
            <div class="font-weight-bold mb-2">当月设备定保清单</div>
            <div class="position-relative mb-3">
                <div class="text-center position-absolute" style="width:100%; top: 72px">
                    <div class="text-bolder font-p24" id="month_count">0</div>
                    <div class="font-p12 text-powerOff mb-1">次</div>
                    <div class="font-p12">当月需定保</div>
                </div>
                <div class="chart" id="chart_pie1" style="height: 230px;"></div>
            </div>
        </div>
        <div class="custom-section flex-1 ml-3">
            <div class="d-flex justify-content-between mb-2">
                <div class="font-weight-bold">当月定保设备清单</div>
                <div class="mt-3">
                    <select class="form-control" onchange="loadMaintenanceList()" id="param_id">
                        <option value="0">全部</option>
                        <option value="4">应维保</option>
                        <option value="1">已维保</option>
                        <option value="2">待维保</option>
                        <option value="3">已延期</option>
                        <option value="5">延期保养</option>
                    </select>
                </div>
            </div>
            <div class="custom-scroll-y pr-1" style="height: 220px; ">
                <table class="table table-striped table-bordered table-center table-sm mb-0" id="wait_List">
                    <thead>
                    <tr>
                        <th>设备名称</th>
                        <th>设备类型</th>
                        <th>设备编号</th>
                        <th>状态</th>
                        <th>维保周期</th>
                        <th>上次维保日期</th>
                        <th>应维保日期</th>
                        <th>下次维保日期</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="custom-section mt-3">
        <div class="font-weight-bold mb-2">维保记录</div>
        <div class="d-flex align-items-center justify-content-between mb-3">
            <form shiro:hasAnyPermissions="device:proc:maintenance:view,device:proc:maintenance:opera"
                  class="form-row align-items-center mb-0" id="param_form">
                <div class="col-auto">
                    <strong class="font-p14">条件查询：</strong>
                </div>
                <div class="col-auto">
                    <select class="form-control" id="company-list">
                    </select>
                </div>
                <div class="col-auto">
                    <input class="form-control" id="name" type="text"
                           placeholder="设备名称">
                </div>
                <div class="col-auto">
                    <select class="form-control" id="deviceType-select">

                    </select>
                </div>
                <div class="col-auto">
                    <select class="form-control" onchange="quickQuerySelector(this)">
                        <option value="3">最近3天</option>
                        <option value="7">最近一周</option>
                        <option value="30">最近一个月</option>
                        <option value="90">最近三个月</option>
                    </select>
                </div>
                <div class="col-auto">
                    <input class="form-control time-picker" name="beginTime" id="searchTimeBegin" type="text"
                           placeholder="选择时间范围" autocomplete="off" style="min-width: 225px;">
                </div>
                <div class="col-auto">
                    <button class="btn btn-primary" type="button" onclick="loadMaintenanceData()"><i
                            class="iconfont icon-dituyechaxun"></i> 查询
                    </button>
                </div>
            </form>
            <div class="ml-4">
                <button shiro:hasPermission="device:proc:maintenance:opera" class="btn btn-primary text-nowrap" type="button"
                        onclick="addInfo()"><i class="fa fa-plus"></i> 添加维保记录
                </button>
            </div>
        </div>
        <div class="d-flex">
            <div class="position-relative mb-3">
                <div class="text-center position-absolute" style="width:352px; top: 90px">
                    <div class="text-bolder font-p24" id="record_count">0</div>
                    <div class="font-p12 text-powerOff mb-1">次</div>
                    <div class="font-p12">维保次数</div>
                </div>
                <div class="chart" id="chart_pie2" style="height: 316px; width: 352px;"></div>
            </div>
            <div class="ml-3" style="width: calc(100% - 368px);">
                <div class="mb-3" style="overflow-x: auto">
                    <table class="table table-striped table-bordered table-center mb-0" id="maintenance_List">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>归属企业</th>
                            <th>设备名称</th>
                            <th>设备类型</th>
                            <th>设备编号</th>
                            <th>维保种类</th>
                            <th>计划时间</th>
                            <th>完成时间</th>
                            <th>实施用时</th>
                            <th>维保内容</th>
                            <th>更换材料清单</th>
                            <th>实施人</th>
                            <th>检查验证人</th>
                            <th>照片</th>
                            <th shiro:hasPermission="device:proc:maintenance:opera">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div id="page" class="page_div"></div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div shiro:hasPermission="device:proc:maintenance:opera" class="modal fade" id="addInfoModal" data-backdrop="static"
     tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <form class="modal-content text-body" id="addInfoForm">
            <div class="modal-header">
                <div class="modal-title"><i class="iconfont icon-juxing"></i><span id="modal_title">添加维保记录</span></div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body pr-5">
                <div class="text-secondary font-p12 mb-2">注：带<span class="form-required">*</span><span
                        class="ml-3"></span>标识的为必填项
                </div>
                <div class="row">
                    <div class="col-6">
                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label" for="validationCustom01">设备编号<span
                                    class="form-required">*</span></label>
                            <div class="col-sm-8">
                                <input type="hidden" name="id" id="id-id">
                                <input type="hidden" name="methodType" id="method-id" value="0">
                                <input class="form-control" type="text" name="sn" id="validationCustom01" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label">设备名称</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="text" readonly id="deviceName_id">
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label" for="validationCustom04">维保种类<span
                                    class="form-required">*</span></label>
                            <div class="col-sm-8">
                                <select class="form-control" id="validationCustom04" name="species">
                                    <option value="1">定保</option>
                                    <option value="2">一级保养</option>
                                    <option value="3">二级保养</option>
                                    <option value="4">预防性维修</option>
                                    <option value="5">故障维修</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label" for="validationCustom05">实施用时<span
                                    class="form-required">*</span></label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <input class="form-control" type="text" id="validationCustom05" name="timeCost">
                                    <div class="input-group-append">
                                        <span class="input-group-text">H</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label" for="validationCustom02">维保内容<span
                                    class="form-required">*</span></label>
                            <div class="col-sm-8">
                                <textarea class="form-control" name="content" id="validationCustom02"
                                          row="3"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label" for="validationCustom03">维保完成时间<span
                                    class="form-required">*</span></label>
                            <div class="col-sm-8">
                                <input class="form-control" type="text" name="maintenanceTime" id="validationCustom03"
                                       autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-12  mb-3">
                        <div class="border-bottom ml-4"></div>
                    </div>
                    <div class="col-6">
                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label" for="validationCustom06">实施人</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="text" id="validationCustom06" name="Implementer">
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label" for="validationCustom07">检查验证人</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="text" id="validationCustom07" name="checkVerifier">
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label">照片</label>
                            <div class="col-sm-8">
                                <a class="image-upload-area text-center d-flex align-items-center justify-content-center"
                                   href="##" onclick="$('#add_file_hide').click()">
                                    <img id="img_load_area" src="../customize/images/icon/image-upload.png" alt="">
                                </a>
                                <input type="file" name="photoFile" id="add_file_hide" style="display: none">
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label" for="validationCustom08">更换材料清单</label>
                            <div class="col-sm-8">
                                <textarea class="form-control" row="3" id="validationCustom08"
                                          name="materialList"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary">提交保存</button>
            </div>
        </form>
    </div>
</div>
<!-- 查看大图modal -->
<div class="modal fade" id="viewImageModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content text-body">
            <div class="modal-header">
                <div class="modal-title"><i class="iconfont icon-juxing"></i> 查看大图</div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body font-p14">
                <img class="img-fluid" id="img_preview_area" src="" alt="">
            </div>
        </div>
    </div>
</div>
</body>
<script src="../plugins/jquery-3.4.1.min.js"></script>
<script src="../plugins/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../plugins/bootstrapValidator/bootstrapValidator.min.js"></script>
<script src="../plugins/bootstrapValidator/zh_CN.js"></script>
<script src="../plugins/alert.js"></script>
<script src="../plugins/paging.js"></script>
<script src="../plugins/laydate/laydate.js"></script>
<script src="../plugins/echarts.min.js"></script>
<script src="../customize/js/common.js"></script>
<script src="../customize/js/CommonUtils.js"></script>
<script src="../customize/js/customModalV2.js"></script>
<script src="../customize/js/prdEquMaintenance.js"></script>
<script>
    var deviceProcMaintenanceView = false;
    var deviceProcMaintenanceOpera = false;
    var titleTo = ['#', '归属企业', '设备类型', '设备名称', '设备编号', '维保种类', '计划时间', '完成时间', '实施用时', '维保内容', '更换材料清单', '实施人', '检查验证人', '照片'];
    var labelTo = ['order', 'ename', 'deviceType', 'name', 'sn', 'species', 'planningTime', 'maintenanceTime', 'timeCost', 'content', 'materialList', 'implementer', 'checkVerifier', 'image'];
    var labelTo = ['order', 'ename', 'deviceType', 'name', 'sn', 'species', 'planningTime', 'maintenanceTime', 'timeCost', 'content', 'materialList', 'implementer', 'checkVerifier', 'image'];
</script>
<shiro:hasPermission name="device:proc:maintenance:view">
    <script>
        deviceProcMaintenanceView = true;
    </script>
</shiro:hasPermission>
<shiro:hasPermission name="device:proc:maintenance:opera">
    <script>
        deviceProcMaintenanceOpera = true;
        titleTo.push('操作');
        labelTo.push('opera');
    </script>
</shiro:hasPermission>
</html>